<template>
  <div class="tc fs-4 p-2">游戏管理</div>

  <!-- 查询的表单 -->
  <NFlex justify="end" class="p-5">
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.gname" placeholder="请输入游戏名称"></NInput>
      </NFormItem>
      <NFormItem>
        <NSpace>
          <NButton type="primary" @click="selectQuery">{{ btnText }}</NButton>
          <NButton type="error" @click="reset">重置</NButton>
          <NButton type="success" @click="requery">查询</NButton>
          <NButton type="info" @click="showAdd">添加</NButton>
        </NSpace>
      </NFormItem>
    </NForm>
  </NFlex>

  <!-- 数据表格 -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div>
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination>
    </NFlex>
  </div>

  <!-- 游戏发行商选择对话框 -->
  <NModal preset="dialog" v-model:show="svisible" title="选择游戏发行商">
    <div>
      <HuGamePublisherComp mode="selector" @info-selected="selectPublisher"></HuGamePublisherComp>
    </div>
  </NModal>

  <!-- 添加的游戏对话框 -->
  <NModal @after-leave="requery" preset="dialog" v-model:show="avisible" title="添加游戏">
    <div>
      <NForm>
        <NFormItem>
          <NButton @click="svisible = true">{{ btnAddText }}</NButton>
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="addInfo.gname" placeholder="游戏名称"></NInput>
        </NFormItem>
        <NFormItem>
          <NInput type="textarea" v-model:value="addInfo.intro" placeholder="游戏简介"></NInput>
        </NFormItem>
        <NFormItem>
          <NDatePicker
            v-model:formatted-value="dateinfo"
            format="yyyy-MM-dd"
            :is-date-disabled="dateValidate"
          ></NDatePicker>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NSpace>
        <NButton :loading="loading" type="primary" @click="add">添加</NButton>
        <NButton @click="avisible = false">关闭</NButton>
      </NSpace>
    </template>
  </NModal>

  <!-- 修改的游戏对话框 -->
  <NModal @after-leave="requery" preset="dialog" v-model:show="mvisible" title="修改游戏">
    <div>
      <NForm>
        <NFormItem>
          <NButton @click="svisible = true">{{ btnModifyText }}</NButton>
        </NFormItem>
        <NFormItem>
          <NInput v-model:value="modifyInfo.gname" placeholder="游戏名称"></NInput>
        </NFormItem>
        <NFormItem>
          <NInput type="textarea" v-model:value="modifyInfo.intro" placeholder="游戏简介"></NInput>
        </NFormItem>
        <NFormItem>
          <NDatePicker
            v-model:formatted-value="dateinfo"
            format="yyyy-MM-dd"
            :is-date-disabled="dateValidate"
          ></NDatePicker>
        </NFormItem>
      </NForm>
    </div>
    <template #action>
      <NSpace>
        <NButton :loading="loading" type="primary" @click="modify">保存</NButton>
        <NButton @click="mvisible = false">关闭</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NModal,
  NDatePicker,
  NPagination,
  NFlex,
  NSpace,
  useDialog,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { PageBean, BaseDataResult, PageVO, BaseResult } from '@/types/BaseResult'
import type { TbGame, TbGamePublisher } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import HuGamePublisherComp from '@/components/HuGamePublisherComp.vue'
const message = useMessage()
const dialog = useDialog()

const loading = ref(false)
const dateinfo = ref(Tools.formatDate(new Date(), 'yyyy-MM-dd'))

const dateValidate = (ts: number) => {
  return new Date().getTime() <= ts
}

const selectMode = ref('query')
const svisible = ref(false)
const btnText = ref('请选择发行商')

//#region 选择发行商的部分
const selectPublisher = (info: TbGamePublisher) => {
  svisible.value = false
  if (selectMode.value == 'query') {
    btnText.value = info.publisher
    queryInfo.value.publisher = info.gpid
  } else if (selectMode.value == 'add') {
    btnAddText.value = info.publisher
    addInfo.value.publisher = info.gpid
  } else if (selectMode.value == 'modify') {
    btnAddText.value = info.publisher
    addInfo.value.publisher = info.gpid
  }
}

//#endregion

//#region查询的部分

const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const queryInfo = ref({ publisher: -1, gname: '' })
const list = ref([] as Array<TbGame>)

const selectQuery = () => {
  selectMode.value = 'query'
  btnText.value = '请选择发行商'
  queryInfo.value.publisher = -1
  svisible.value = true
}

const columns = ref([
  {
    title: '游戏名称',
    key: 'gname',
  },
  {
    title: '游戏介绍',
    key: 'intro',
    render(row) {
      return h('div', { class: 'col-16' }, row.intro)
    },
  },
  {
    title: '发行时间',
    key: 'creadted',
    render(row) {
      return Tools.formatDate(row.created as number, 'yyyy-MM-dd')
    },
  },
  {
    title: '发行商',
    key: 'tbGamePublisher.publisher',
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {
              showModify(row)
            },
          },
          '修改',
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              showDelete(row)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbGame>[])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  queryInfo.value = { publisher: -1, gname: '' }
  page.value.pageNumber = 1
  btnText.value = '请选择发行商'
  query()
}

const query = () => {
  loading.value = true
  Api.get(
    `/crud/game/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbGame>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}
onMounted(() => {
  query()
})

//#endregion

//#region 添加的部分
const avisible = ref(false)
const addInfo = ref({} as TbGame)
const btnAddText = ref('请选择发行商')

const resetAdd = () => {
  dateinfo.value = Tools.formatDate(new Date(), 'yyyy-MM-dd')
  addInfo.value.publisher = -1
  addInfo.value.gname = ''
  addInfo.value.intro = ''
  btnAddText.value = '请选择发行商'
}

const showAdd = () => {
  resetAdd()
  selectMode.value = 'add'
  avisible.value = true
}

const add = () => {
  loading.value = true
  addInfo.value.created = dateinfo.value
  Api.post('/crud/game', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      avisible.value = false
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 修改的部分
const mvisible = ref(false)
const modifyInfo = ref({} as TbGame)
const btnModifyText = ref('请选择发行商')

const showModify = (row: TbGame) => {
  modifyInfo.value = Tools.concatJson(row) as TbGame
  dateinfo.value = Tools.formatDate(row.created as number, 'yyyy-MM-dd')
  btnModifyText.value = row.tbGamePublisher.publisher
  selectMode.value = 'modify'
  mvisible.value = true
}

const modify = () => {
  loading.value = true
  modifyInfo.value.created = dateinfo.value
  Api.put('/crud/game', modifyInfo.value, (data: BaseResult) => {
    if (data.success) {
      message.success('修改成功')
      mvisible.value = false
      return
    }
    message.error(data.message)
  })
}
//#endregion

//#region 删除的部分
const showDelete = (row: TbGame) => {
  dialog.warning({
    title: '警告',
    content: `确定删除${row.gname}吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      loading.value = true
      Api.delete(`/crud/game/${row.gid}`, {}, (data: BaseResult) => {
        loading.value = false
        if (data.success) {
          message.success('删除成功')
          requery()
          return
        }
        message.error(data.message)
      })
    },
  })
}
//#endregion
</script>

<style scoped lang="scss">
/* TODO 宽度的样式会用公用scss样式解决 */
</style>
